import 'dart:convert';
import 'dart:math';

import 'package:bruno/bruno.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:graphic/graphic.dart';
import 'package:whale/helper/utils/util.dart';
import '../index.dart';
import 'RadarProvider.dart';
import 'horizontal_chart.dart';


class TrendDataView extends GetView<WatchController> {
  const TrendDataView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 1.sw,

      margin: EdgeInsets.only(top: 15.r),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            child: Text(
              '趋势分析',
              style: TextStyle(
                  color: ColorsUtil.title,
                  fontSize: 16.sp,
                  fontWeight: FontWeight.bold
              ),
            ),
          ),
          Container(
            margin:  EdgeInsets.only(top: 10.r,bottom: 10.r),
            width: 1.sw,
            height: 280.r,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(10.r),
            ),
            padding: EdgeInsets.only(bottom: 10.r),
            child: Column(
              children: [
                Container(
                  padding: EdgeInsets.all(12.r),
                  child: Row(
                    children: [
                      Container(
                        width: 12.r,
                        height: 12.r,
                        margin: EdgeInsets.only(right: 5.r),
                        decoration: BoxDecoration(
                            color: const Color(0xffBDDEFE),
                            border: Border.all(color: Color(0xff017EFF),width: 0.5)
                        ),

                      ),
                      Text(
                        '文件数',
                        style: TextStyle(
                          color: ColorsUtil.title,
                          fontSize: 12.sp,
                        ),
                      ),
                      Container(
                        width: 12.r,
                        height: 12.r,
                        margin: EdgeInsets.only(left: 10.r,right: 5.r),
                        decoration: BoxDecoration(
                            color: const Color(0xffD2E9DB),
                            border: Border.all(color: Color(0xff3ABC93),width: 0.5)
                        ),
                      ),
                      Text(
                        '疑似违规数',
                        style: TextStyle(
                          color: ColorsUtil.title,
                          fontSize: 12.sp,
                        ),
                      ),
                      Container(
                        width: 12.r,
                        height: 12.r,
                        margin: EdgeInsets.only(left: 10.r,right: 5.r),
                        decoration: BoxDecoration(
                            color: const Color(0xffE5E2D5),
                            border: Border.all(color: Color(0xffD2B38E),width: 0.5)
                        ),

                      ),
                      Text(
                        '疑似高风险违规数',
                        style: TextStyle(
                          color: ColorsUtil.title,
                          fontSize: 12.sp,
                        ),
                      ),
                      Spacer(),
                      GestureDetector(
                        onTap: ()=>Get.to(()=>HorizontalChart()),
                        child: Row(
                          children: [
                            Image.asset('icon_full.png'.imgPathWatch,width: 12.r,height: 12.r,fit: BoxFit.fill,),
                            SizedBox(width: 5.r,),
                            Text('横屏',style: TextStyle(color: ColorsUtil.subTitle,fontSize: 12.r),)
                          ],
                        ),
                      )
                    ],
                  ),
                ),
                Expanded(child: Chart(
                  data: controller.state.trendGroupData,
                  variables: {
                    'date': Variable(
                      accessor: (Map map) => map['date'] as String,
                      scale: OrdinalScale(tickCount: 5, inflate: true),
                    ),
                    'points': Variable(
                      accessor: (Map map) => map['points'] as num,
                    ),
                    'name': Variable(
                      accessor: (Map map) => map['name'] as String,
                    ),
                  },
                  coord: RectCoord(horizontalRange: [0.01, 0.99]),
                  marks: [
                    LineMark(
                      position:
                      Varset('date') * Varset('points') / Varset('name'),
                      shape: ShapeEncode(value: BasicLineShape(smooth: true)),
                      size: SizeEncode(value: 0.5),
                      color: ColorEncode(
                        variable: 'name',
                        values: myColors,
                        updaters: {
                          'groupMouse': {
                            false: (color) => color
                          },
                          'groupTouch': {
                            false: (color) => color
                          },
                        },
                      ),
                    ),
                    PointMark(
                      color: ColorEncode(
                        variable: 'name',
                        values: myColors,
                        updaters: {
                          'groupMouse': {
                            false: (color) => color
                          },
                          'groupTouch': {
                            false: (color) => color
                          },
                        },
                      ),
                    ),
                  ],
                  axes: [
                    Defaults.horizontalAxis,
                    Defaults.verticalAxis,
                  ],
                  selections: {
                    'tooltipMouse': PointSelection(on: {
                      GestureType.hover,
                    }, devices: {
                      PointerDeviceKind.mouse
                    }),
                    'groupMouse': PointSelection(
                        on: {
                          GestureType.hover,
                        },
                        variable: 'name',
                        devices: {PointerDeviceKind.mouse}),
                    'tooltipTouch': PointSelection(on: {
                      GestureType.scaleUpdate,
                      GestureType.tapDown,
                      GestureType.longPressMoveUpdate
                    }, devices: {
                      PointerDeviceKind.touch
                    }),
                    'groupTouch': PointSelection(
                        on: {
                          GestureType.scaleUpdate,
                          GestureType.tapDown,
                          GestureType.longPressMoveUpdate
                        },
                        variable: 'name',
                        devices: {PointerDeviceKind.touch}),
                  },
                  tooltip: TooltipGuide(
                    selections: {'tooltipTouch', 'tooltipMouse'},
                    followPointer: [true, true],
                    align: Alignment.topLeft,
                    mark: 0,
                    variables: [
                      'date',
                      'name',
                      'points',
                    ],
                  ),
                  crosshair: CrosshairGuide(
                    selections: {'tooltipTouch', 'tooltipMouse'},
                    styles: [
                      PaintStyle(strokeColor: const Color(0xffbfbfbf)),
                      PaintStyle(strokeColor: const Color(0x00bfbfbf)),
                    ],
                    followPointer: [true, false],
                  ),
                )),
              ],
            ),
          ),

        ],
      ),
    );

  }
  /// A color palette of 10 colors.
  List<Color> get myColors => [
    const Color(0xFF007EFF),
    const Color(0xFF3ABC93),
    const Color(0xFFD2B38E),
    const Color(0xfff6bd16),
    const Color(0xff6f5ef9),
    const Color(0xff6dc8ec),
    const Color(0xff945fb9),
    const Color(0xffff9845),
    const Color(0xff1e9493),
    const Color(0xffff99c3),
  ];
}